<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="header">
        <div class="container clearfix">
            <div class="logo left">
                <h1>
                    <a href="">豆瓣</a>
                </h1>
            </div>
            <div class="search left">
                <form>
                    <input type="text" class="txt" placeholder="电影，数据，音乐">
                    <button>
                        <i class="iconfont  icon-sousuo1"></i>
                    </button>
                </form>
            </div>
            <nav class="menu right clearfix">
                <a class="a1" href=""></a>
                <a class="a2" href=""></a>
                <a class="a3" href=""></a>
                <a class="a4" href=""></a>
                <a class="a5" href=""></a>
                <a class="a6" href=""></a>
                <a class="a7" href=""></a>
                <a class="a8" href=""></a>
            </nav>
        </div>
    </header>
    <div class="banner">
        <div class="container clearfix">
            <iframe  class="right login-area"  src="loginframe.html" frameborder="0"></iframe>
            <div class="slogan right">
                <h1 class="title">
                    豆瓣
                    <span>6.0</span>
                </h1>
                <div class="download">
                    <button class="btn">下载豆瓣app</button>
                    <span class="qrcode">
                        <img src="/img/icon-qr-small.png" alt="">
                        <div class="qrcode-img hidden">
                            <img src="img/qrcode.png" alt="二维码">
                            <p>IOS/Android 扫码直接下载</p>
                        </div>
                    </span>
                </div>
            </div>
        </div>
        
    </div>
    <div class="else">
        <!-- r热点 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-right">
                    <div class="adv">
                        <a href="">
                            <img src="./img/adv1.jpg" alt="">
                        </a>
                    </div>
                    <div class="section-title">
                        <h3 class="title">热门话题</h3>
                        <span class="link">
                            <a href="">
                                去话题广场
                            </a>
                        </span>
                    </div>
                    <div class="hot-list">
                        <li>
                            <div class="title">
                                <a href="" class="adv-tag">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>123456人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>123456人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>123456人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>123456人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>123456人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <a href="">文学作品中最深刻的孤独描写</a>
                            </div>
                            <div class="desc">
                                <span>123456人浏览</span>
                                <span>新话题</span>
                            </div>
                        </li>
                    </div>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h3 class="title">热门内容</h3>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <div class="hot-main clearfix">
                        <div class="left">
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            有名字的那一贞
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            有名字的那一贞
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            有名字的那一贞
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover1.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                            有名字的那一贞
                                        </a>
                                        <span>
                                            76张照片
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="right">
                            <ul>
                                <li>
                                    <a href="">城市失忆症</a>
                                    <div class="title">
                                        菠萝的日志
                                    </div>
                                    <div class="desc">
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, voluptatem!
                                    </div>
                                </li>
                                <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                                <li><a href="">Sint, eveniet. Blanditiis, error fuga!</a></li>
                                <li><a href="">Quis tempore omnis exercitationem assumenda?</a></li>
                                <li><a href="">Non ipsam quis recusandae aliquid?</a></li>
                                <li><a href="">Ratione iste ut autem. Dolor.</a></li>
                                <li><a href="">Voluptatum nisi sunt odio culpa.</a></li>
                                <li><a href="">Ad nam dolore temporibus eveniet.</a></li>
                                <li><a href="">Modi quibusdam earum quas nostrum.</a></li>
                                <li><a href="">Tempore animi expedita saepe assumenda!</a></li>
                                <li><a href="">Vel sapiente ea voluptatibus. Soluta.</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 豆瓣时间 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-left">
                    <h2 class="title">
                        <a href="" class="dark-color">
                            豆瓣时间
                        </a>
                    </h2>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h3 class="title">热门专栏</h3>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <div class="time-main">
                        <ul class="item-list">
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">
                                        好莱坞人像布光课-美恐摄影大师教你立刻出师
                                    </a>
                                    <span>
                                        视频专栏
                                    </span>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="" class="dark-color">
                                视频
                            </a>
                        </h2>
                    </div>
                </div>
                <div class="main video-main">
                    <div class="section-title">
                        <a href="">
                            <h3 class="title">瓣嘴</h3>
                        </a> 
                    </div>
                    <ul class="item-list">
                        <li>
                            <a href="">
                                <div class="img iconfont icon-24gf-playCircle">
                                    <img src="/img/cover3.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                <a href="">这是这个视频的介绍</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont icon-24gf-playCircle">
                                    <img src="/img/cover3.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                <a href="">这是这个视频的介绍</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont icon-24gf-playCircle">
                                    <img src="/img/cover3.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                <a href="">这是这个视频的介绍</a>
                            </div>
                        </li>
                    </ul>
                    <div class="section-title">
                        <a href="">
                            <h3 class="title">观影会客厅</h3>
                        </a>
                    </div>
                    <ul class="item-list">
                        <li>
                            <a href="">
                                <div class="img iconfont icon-24gf-playCircle">
                                    <img src="/img/cover3.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                <a href="">这是这个视频的介绍</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont icon-24gf-playCircle">
                                    <img src="/img/cover3.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                <a href="">这是这个视频的介绍</a>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <div class="img iconfont icon-24gf-playCircle">
                                    <img src="/img/cover3.jpg" alt="">
                                </div>
                            </a>
                            <div class="words">
                                <a href="">这是这个视频的介绍</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 豆瓣电影 -->
        <div class="section">
            <div class="container clearfix">
                <div class="aside-left">
                    <h2 class="title">
                        <a href="" >
                            电影
                        </a>
                    </h2>
                    <nav class="left-menu">
                        <ul>
                            <li><a href="">影讯&购票</a></li>
                            <li><a class="new" href="">选电影</a></li>
                            <li><a href="">Neque?</a></li>
                            <li><a href="">Dolores.</a></li>
                            <li><a href="">Modi?</a></li>
                            <li><a href="">Corporis.</a></li>
                            <li><a href="">Aliquid.</a></li>
                            <li><a href="">Itaque?</a></li>
                            <li><a href="">Unde.</a></li>
                            <li><a href="">Aliquid.</a></li>
                        </ul>
                    </nav>

                </div>
                <div class="aside-right movie-area">
                    <div class="section-title">
                        <h3 class="title">影片分类</h3>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="right-manu-list clearfix">
                        <li><a href="">爱情</a></li>
                        <li><a href="">戏剧</a></li>
                        <li><a href="">剧情</a></li>
                        <li><a href="">Lorem.</a></li>
                        <li><a href="">Quas!</a></li>
                        <li><a href="">Similique.</a></li>
                        <li><a href="">Illo?</a></li>
                        <li><a href="">Ducimus!</a></li>
                        <li><a href="">Expedita.</a></li>
                        <li><a href="">Expedita?</a></li>
                        <li><a href="">Sequi!</a></li>
                        <li><a href="">Quidem.</a></li>
                        <li><a href="">Nemo.</a></li>
                    </ul>
                    <div class="section-title">
                        <h3 class="title">近期热门</h3>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <ul class="order-movie-list">
                        <li><a href="">风中有朵雨做的云</a></li>
                        <li><a href="">飞驰人生</a></li>
                        <li><a href="">Lorem.</a></li>
                        <li><a href="">Tempore!</a></li>
                        <li><a href="">Voluptatem.</a></li>
                        <li><a href="">Quos.</a></li>
                        <li><a href="">Quasi!</a></li>
                        <li><a href="">Error?</a></li>
                        <li><a href="">Nostrum.</a></li>
                        <li><a href="">Quasi?</a></li>
                    </ul>
                </div>
                <div class="main">
                    <div class="section-title">
                        <h3 class="title">正在热映</h3>
                        <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                    </div>
                    <div class="movie-area">
                        <ul class="item-list">
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁和三十个女人</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">8.9</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star45"></span>
                                    <span class="number">8.0</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star35"></span>
                                    <span class="number">7.0</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star00"></span>
                                    <span class="number">0.0</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁和三十个女人</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">8.9</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁和三十个女人</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">8.9</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁和三十个女人</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">8.9</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                            <li>
                                <div class="img">
                                    <a href="">
                                        <img src="/img/cover5.webp" alt="">
                                    </a>
                                </div>
                                <div class="words">
                                    <a href="">阿拉丁和三十个女人</a>
                                </div>
                                <div class="star">
                                    <span class="star-bg star50"></span>
                                    <span class="number">8.9</span>
                                <div class="func">
                                    <a href="" class="block-link">选座购票</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container clearfix">
            <div class="line">
                
            </div>
            <div class="left clearfix">
                <p>
                    © 2005－2021 douban.com, all rights reserved 北京豆网科技有限公司
                </p>
                <p>
                    <a href="">营业执照</a><a href="">京ICP证090015号</a>
                    京ICP备11027288号 网络视听许可证0110418号
                </p>
                <p>
                    <a href="">新出发京批字第直160029号</a>
                    京网文[2021]2980-826号（署）网出证（京）字第120号
                </p>
                <p class="left">
                    违法和不良信息/涉未成年人有害信息投诉：
                </p>
                <div class="img1 right">
                    <img src="/img/tousu.jpeg" alt="">
                </div>
                <p>
                    <span>违法和不良信息投诉电话：4008353331-9</span>
                </p>
                <p class="left">
                    网络从业者不良行为举报：
                </p>
                <div class="img2 right">
                    <img src="/img/jubao.png" alt="">
                </div>
                <p>
                    中国互联网举报中心 电话：12377  京公网安备11010502000728
                </p>
            </div>
            <div class="right">
                <a href="">关于豆瓣</a>
                ·
                <a href="">载豆瓣工作</a>
                ·
                <a href="">联系我们</a>
                ·
                <a href="">A.</a>
                ·
                <a href="">Soluta.</a>
                ·
                <a href="">Corrupti?</a>
                ·
                <a href="">Perspiciatis!</a>
            </div>
        </div>
    </footer>
</body>     
</html>